/**
 * @Description:
 * @author 云离
 * @date: 2020-02-06
 */
import React, { Component } from 'react'
import { Form, Icon, Input, Button, message, Row, Col} from 'antd'
import {host} from '../../config/config'
import md5 from 'md5-node'
import axios from '../../apis/api'
import qs from 'qs'
import { connect } from 'react-redux'
import PropTypes from "prop-types";

const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
    },
};

const mapStateToProps = (state, ownProps) => {
    return {
        user: state.main.user
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
    }
}

class ResetPw extends Component {

    static propTypes = {
        handleClose: PropTypes.func.isRequired
    }

    static defaultProps = {
        hide: false
    }

    state = {
        loading: false
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields(async (err, values) => {
            if (!err) {
                const {oldPw, newPw, newPw2} = values
                if (newPw !== newPw2) {
                    message.error('新密码与确认密码不同')
                    return
                }
                this.setState({loading: true})
                try {
                    const result = await axios.get(`/system/user/profile/checkPassword?oldPassword=${oldPw}&password=${md5(oldPw)}`)
                    if (!result) {
                        message.error('原密码输入错误')
                        this.setState({loading: false})
                        return
                    }
                    const resetResult = await axios.post('/system/user/profile/resetPwd', qs.stringify({
                        oldPassword: md5(oldPw),
                        newPassword: md5(newPw)
                    }))
                    if (resetResult.code === 0) {
                        message.success('操作成功')
                    } else {
                        message.error(resetResult.msg)
                    }
                    this.setState({loading: false})
                    this.props.handleClose()
                }catch (e) {
                    this.setState({loading: false})
                    console.log(e)
                }
            }
        });
    }

    componentDidMount () {
    }

    handleClose = () => {
        this.props.handleClose()
    }

    render() {
        const self = this
        const { getFieldDecorator } = this.props.form;
        const { loading } = this.state
        return (
            <div>
                <Form {...formItemLayout} autoComplete="off">
                    <Form.Item label={'旧密码'}>
                        {getFieldDecorator('oldPw', {
                            rules: [{ required: true, message: '请输入旧密码'}],
                        })(
                            <Input type="password" placeholder='请输入旧密码' autoComplete="off"/>
                        )}
                    </Form.Item>
                    <Form.Item label={'新密码'}>
                        {getFieldDecorator('newPw', {
                            rules: [{ required: true, message: '请输入新密码'}],
                        })(
                            <Input type="password" placeholder='请输入新密码' autoComplete="off"/>
                        )}
                    </Form.Item>
                    <Form.Item label={'确认密码'}>
                        {getFieldDecorator('newPw2', {
                            rules: [{ required: true, message: '请输入确认密码'}],
                        })(
                            <Input type="password" placeholder='请确认密码' autoComplete="off"/>
                        )}
                    </Form.Item>
                </Form>
                <div style={{textAlign: 'center'}}>
                    <Button onClick={this.handleSubmit} type="primary" htmlType="submit"  loading={loading}>
                        保存
                    </Button>
                    {this.props.hide ? null : <Button onClick={this.handleClose} type="danger" style={{marginLeft: 20}}>
                        关闭
                    </Button>}
                </div>
            </div>
        );
    }
}

export default Form.create()(connect(mapStateToProps,mapDispatchToProps)(ResetPw))
